// 试验：在vue工程使用jsx，实现动态标签，进一步实现不确定表单
// 试验结果：可以在vue工程使用jsx，但还是不能实现动态标签
// 意义：react用户可以依次过渡到vue，某些vue不能实现的功能可以用jsx实现
// 展望：如果是服务端渲染页面有希望实现动态标签，进而实现动态表单
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      form: {},
      formList: [
        {
          tag: `<el-button type="primary">哈哈</el-button>`,
          field: 'button',
          fieldName: '按钮'
        },
      ]
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.$forceUpdate()
    })
  },
  methods: {
    getScrollingCon,
    loadFormlist() {
      // 此处请求表单列表数据
      this.formList.forEach( item => {
        this.$set(this.form, item.field, null)
        this.form[item.field] = item.defaultValue || null
      })
    },
    handleSubmit() {
      this.$refs.form.validate( isValid => {
        if(isValid) {
          console.log(this.form)
          this.$message.success('提交成功')
        } else {
          this.$message.warn('请检查表单项')
          return false
        }
      })
    }
  },
  render(h) {
    return (
      <div id="unsure-form">
        <g-banner title="字符串表单" des="可根据后端请求到的表单字符串渲染表单， 并且支持渲染组件。本页面没有使用模板字符串，而是使用了jsx语法，开发者使用时需要略懂React Jsx"></g-banner>
        <a-affix target={this.getScrollingCon}>
          <div class="g-title-con">
            <h2 class="g-main-title pull-left">不确定表单</h2>
            <div class="g-title-button pull-right">
              <el-button type="primary" onClick={this.handleSubmit}>提交</el-button>
              <el-button>返回</el-button>
            </div>
            <div clearfix></div>
          </div>
        </a-affix>
        <div class="g-box">
          { h('el-button', { attrs: { type: 'primary' } }, '这是饿了么按钮') }
        </div>
      </div>
    )
  },
}